<template>
  <el-dialog v-model="dialogVisible" fullscreen>
    <el-form :disabled="isAudit || isView" ref="formRef" :model="formData" :rules="formRules" label-width="100px"
      v-loading="formLoading">
      <ContentWrap>
        <el-descriptions title="" border :column=3>
          <el-descriptions-item label="等级">{{ formData.planAreaRespVO.levelName }}</el-descriptions-item>
          <el-descriptions-item label="区域">{{ formData.planAreaRespVO.areaName }}</el-descriptions-item>
          <el-descriptions-item label="填报时间">{{ formData.planAreaRespVO.writeTime ? formatDate(new
            Date(formData.planAreaRespVO.writeTime)) : ''
            }}</el-descriptions-item>
          <el-descriptions-item label="填报人">{{ formData.planAreaRespVO.writeUserName }}</el-descriptions-item>
          <el-descriptions-item label="问题描述">{{ formData.remark }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ formData.dutyUserName }}</el-descriptions-item>
          <el-descriptions-item label="计划完成时间">{{ formData.planDate }}</el-descriptions-item>
          <el-descriptions-item label="问题分类">{{ formData.auditTypeName }}</el-descriptions-item>
          <el-descriptions-item label="审核项">{{ formData.configName }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{ formData.auditUserName }}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <UploadFile :isShowTip="false" v-model="formData.files" :disabled="true" />
          </el-descriptions-item>

        </el-descriptions>
      </ContentWrap>


      <ContentWrap>
        <el-row :gutter="21">
          <el-col :span="7">
            <el-form-item label="扣分" prop="deductPoints">
              <el-input type="number" @wheel.prevent v-model="formData.deductPoints" placeholder="请输入扣分" />
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="整改部门" prop="repairDeptId">
              <el-tree-select v-model="formData.repairDeptId" :data="deptList" :props="defaultProps" check-strictly
                node-key="id" placeholder="请选择" />
            </el-form-item>
          </el-col>


          <el-col :span="7">
            <el-form-item label="完成状态" prop="completeStatus">
              <el-select v-model="formData.completeStatus" placeholder="请选择完成状态">
                <el-option v-for="dict in getIntDictOptions(DICT_TYPE.COMPLETE_STATUS)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="20">
            <el-form-item label="措施" prop="takeWay">
              <el-input type="textarea" v-model="formData.takeWay" placeholder="请输入措施" />
            </el-form-item>
          </el-col>


          <el-col :span="20">
            <el-form-item label="备注/说明" prop="problemRemark">
              <el-input type="textarea" v-model="formData.problemRemark" placeholder="请输入问题备注" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="不符合图片" prop="problemImg">
              <UploadImgs v-model="formData.problemImg" :disabled="isAudit || isView" />
            </el-form-item>
          </el-col>


          <el-col :span="5">
            <el-form-item label="整改图片" prop="repairImg">
              <UploadImgs v-model="formData.repairImg" :disabled="isAudit || isView" />
            </el-form-item>
          </el-col>


        </el-row>
      </ContentWrap>

    </el-form>
    <ContentWrap v-if="isAudit || isView">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="审核状态" prop="auditStatus">
            <el-select :disabled="!isAudit" v-model="formData.auditStatus" placeholder="请选择审核状态">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.AUDIT_STATUS)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="审核备注" prop="auditRemark">
            <el-input :disabled="!isAudit" type="textarea" v-model="formData.auditRemark" placeholder="请输入审核备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </ContentWrap>



    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { AuditPlanDetailApi, AuditPlanDetail } from '@/api/business/auditplandetail'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'

/** 审核填报 表单 */
defineOptions({ name: 'AuditPlanDetailForm' })

const deptList = ref<Tree[]>([]) // 树形结构

const isAudit = ref(false)

const isView = ref(false)

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  auditTypeId: undefined,
  auditTypeName: undefined,
  configId: undefined,
  configName: undefined,
  auditResult: undefined,
  remark: undefined,
  dutyUserId: undefined,
  planDate: undefined,
  files: undefined,
  planAreaId: undefined,
  problemImg: [],
  deductPoints: undefined,
  repairDeptId: undefined,
  repairDeptName: undefined,
  takeWay: undefined,
  repairImg: [],
  completeStatus: undefined,
  problemRemark: undefined,
  auditUserId: undefined,
  auditUserName: undefined,
  auditStatus: undefined,
  auditRemark: undefined,
  auditTime: undefined,
  planAreaRespVO: {

  }
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  isAudit.value = false
  isView.value = false

  if (type == 'update') {
    isAudit.value = false
  } else if (type == 'audit') {
    isAudit.value = true
  } else if (type == 'view') {
    isView.value = true
  }

  // 加载部门树
  deptList.value = await handleTree(await DeptApi.getSimpleDeptList())

  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await AuditPlanDetailApi.getAuditPlanDetail(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as AuditPlanDetail
    if (formType.value === 'create') {
      await AuditPlanDetailApi.createAuditPlanDetail(data)
      message.success(t('common.createSuccess'))
    } else {
      await AuditPlanDetailApi.updateAuditPlanDetail(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    auditTypeId: undefined,
    auditTypeName: undefined,
    configId: undefined,
    configName: undefined,
    auditResult: undefined,
    remark: undefined,
    dutyUserId: undefined,
    planDate: undefined,
    files: undefined,
    planAreaId: undefined,
    problemImg: [],
    deductPoints: undefined,
    repairDeptId: undefined,
    repairDeptName: undefined,
    takeWay: undefined,
    repairImg: [],
    completeStatus: undefined,
    problemRemark: undefined,
    auditUserId: undefined,
    auditUserName: undefined,
    auditStatus: undefined,
    auditRemark: undefined,
    auditTime: undefined,
    planAreaRespVO: {

    }
  }
  formRef.value?.resetFields()
}
</script>
